<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .bench_search {
    margin-bottom: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .marginR2 {
    margin-right: 2%;
  }
  .fontsize20 {
    font-size: 20px;
  }
  .fontTitle {
    font-size: 20px;
    height: 52px;
    text-align: right;
    padding-top: 16px;
    // vertical-align: bottom;
  }
  .fontContent {
    font-size: 20px;
    height: 52px;
    text-align: left;
    padding-top: 16px;
    color: #dc9387;
    // vertical-align: bottom;
  }
  .countNum {
    font-size: 35px;
    color: #dc9387;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
  .new-btn-sty1 {
    margin-right: 5px;
    color: #fff;
    background-color: #598ED1;
    border-color: #598ED1;
    font-weight: 500;
  }
  .text-overflow{
    width:300px; /* 超过宽度就显示... */
    text-overflow: ellipsis; /* 显示... */
    overflow: hidden; /* 隐藏文字 */
    white-space: nowrap; /* 不换行 */
    cursor: pointer; /* hover显示手形 */
  }
</style>

<template>
  <div>
    <Card class="card_style" :bordered="false" :dis-hover="true">
      <Tabs :animated="false" v-model="searchInfo.tab_index">
        <TabPane label="业务量统计" name='sqtjnew'>
          <Row class="bench_search">
            <Col span="4" v-if="companyGrade < 2">
              <span>区县：</span>
              <Select v-model="searchInfo.level1" filterable transfer="" @on-change="getMailList(searchInfo.level1,1,null)" style="width: 70%;">
                <Option :value="item.id" v-for="item in mailList[0]" v-bind:key="item.id">{{item.title}}</Option>
              </Select>
            </Col>
            <Col span="4" v-if="companyGrade < 3">
              <span>街道：</span>
              <Select v-model="searchInfo.level2" filterable transfer="" @on-change="getMailList(searchInfo.level2,2,null)" style="width: 70%;">
                <Option :value="item.id" v-for="item in mailList[1]" v-bind:key="item.id">{{item.title}}</Option>
              </Select>
            </Col>
            <Col span="4" v-if="companyGrade < 4">
              <span>社区：</span>
              <Select v-model="searchInfo.level3" filterable transfer="" style="width: 70%;">
                <Option :value="item.id" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
              </Select>
            </Col>
            <Col span="6">
              <span>时间范围：</span>
              <DatePicker type="datetimerange" format="yyyy/MM/dd" transfer="" style="width: 70%"
                          placement="bottom-end" v-model="searchInfo.applytime"></DatePicker>
            </Col>
            <Col span="2" class="marginR2" style="float:right" pull="1">
              <Button class="new-btn-sty" @click="searchDatashequ(1)"><Icon type="ios-search" /> 查询统计</Button>
            </Col>
          </Row>
          <Table v-show="searchInfo.shape" :columns="columnsshequ" :data="datalistshequ" ref="tableshequ" style="margin-top:10px"></Table>
          <Page :total="shequPageInfo.totalRecord" class="page_style" :current="shequPageInfo.pageNo"
                  :page-size="shequPageInfo.pageSize" @on-change="changeshequPageNo" show-total show-elevator show-sizer @on-page-size-change="changeshequsize"/>
          <Row v-if="searchInfo.loading1 == true">
            <Col class="demo-spin-col" span="8" offset="8">
              <Spin fix>
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>数据正在加载</div>
              </Spin>
            </Col>
          </Row>
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<script>
import { getbusinessStatisticsPageList, getMailLevelList, date2str, byRowidList, findStreetNum, byCreatebyInfoList, getForwardRateList, getSomeNum, dycgetSomeNum } from '@/api/eventlist'
import { MyChartPie, MyChartBar } from '_c/charts'
import CountTo from '_c/count-to'
import AcceptLineEchart from '_c/charts/accept-line-echart/new'
export default {
  name: 'closingratelist',
  components: {
    AcceptLineEchart,
    MyChartPie,
    MyChartBar,
    CountTo
  },
  data () {
    return {
      pageNo: 1,
      totalRecord: 0,
      pageSize: 10,
      glpmModal: {
        title1: '',
        title2: '',
        title: '',
        data: {}
      },
      rc: {
        num1: '',
        num2: '',
        num3: '',
        num4: '',
        num5: ''
      },
      num6: '',
      currentpageNo: 1,
      currentpageSize: 10,
      searchInfo: {
        item_id: '',
        tab_index: 0,
        shape: true,
        applytime: [],
        loading1: true,
        loading3: true
      },
      // 第二tab页的事项办理名单弹出框
      itemModalInfo: { show: false, pageNo: 1, pageSize: 10, currentPageNo: 1, currentPageSize: 10 },
      // 社区统计new
      datalistshequ: [],
      shequPageInfo: { pageNo: 1, pageSize: 10, currentPageNo: 1, currentPageSize: 10, totalRecord: 0 },
      // 社区办理时限统计
      // datalisttime: [],
      mailList: [[], [], []],
      columnsshequ: [
        { title: '序号', type: 'index', key: 'index', width: 100, align: 'center' },
        // { title: '事项编号', key: 'item_id', width: 150, align: 'center' },
        { title: '办理机构名称',
          key: 'sq_name',
          width: 200,
          align: 'center',
          render: (h, params) => {
            let para = {
              item_id: this.searchInfo.item_id,
              sq_name: this.searchInfo.sq_name,
              start_time: date2str(this.searchInfo.applytime[0]),
              end_time: date2str(this.searchInfo.applytime[1])
            }
            if (this.companyCode === 'LM') {
              para.id = this.searchInfo.level3 || this.searchInfo.level2 || this.searchInfo.level1 || ''
              para.level = this.searchInfo.level3 ? '4' : this.searchInfo.level2 ? '3' : this.searchInfo.level1 ? '2' : '1'
            } else {
              para.level = '4'
            }
            if (this.searchInfo.sq_name) {
              para.level = '4'
            }
            if (para.level === '4') {
              let sq_name_all = ''
              if (params.row.sq_name_all) {
                sq_name_all = params.row.sq_name_all
              } else {
                sq_name_all = params.row.sq_name
              }
              return h('Poptip', {
                props: {
                  trigger: 'hover',
                  content: sq_name_all,
                  placement: 'top'
                }
              },
              [
                (params.row.sq_name)
              ])
            } else {
              return [
                (params.row.sq_name)
              ]
            }
          }
        },
        { title: '办理量（项）', key: 'allnum', width: 200, align: 'center', sortable: true },
        { title: '线上办理量（项）', key: 'upnum', width: 200, align: 'center', sortable: true },
        { title: '线下办理量（项）', key: 'num', width: 200, align: 'center', sortable: true },
        { title: '线上办理率',
          key: 'b',
          width: 200,
          align: 'center',
          sortable: true,
          render: (h, params) => {
            let num1 = 0
            if (params.row.allnum) {
              num1 = params.row.upnum / params.row.allnum * 100
            }
            return h('div', [h('strong', num1.toFixed(2) + '%')])
          } },
        { title: '线下办理率',
          key: 'a',
          width: 200,
          align: 'center',
          sortable: true,
          render: (h, params) => {
            let num1 = 0
            if (params.row.allnum) {
              num1 = params.row.num / params.row.allnum * 100
            }
            return h('div', [h('strong', num1.toFixed(2) + '%')])
          } }
      ]
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    },
    companyGrade () {
      return this.$store.state.user.severUserInfo.company_grade - 1
    }
  },
  methods: {
    size (pageSize) {
      this.pageSize = pageSize
      this.changePage()
    },
    changePage (page) {
      this.pageNo = page
      this.forwardRate()
    },
    // 社区受理统计查询
    searchDatashequ (pageNo) {
      console.log('aaa' + pageNo)
      this.searchInfo.loading1 = true
      let para = {
        item_id: this.searchInfo.item_id,
        item_type: this.searchInfo.item_type,
        start_time: date2str(this.searchInfo.applytime[0]),
        end_time: date2str(this.searchInfo.applytime[1]),
        pageNo: pageNo,
        pageSize: this.shequPageInfo.pageSize,
        asot: this.shequAsot,
        ishavezzz: this.searchInfo.ishavezzz,
        community: this.searchInfo.community
      }
      if (this.companyGrade < '4') {
        para.id = this.searchInfo.level3 || this.searchInfo.level2 || this.searchInfo.level1 || ''
        para.level = this.searchInfo.level3 ? '4' : '3'
      } else {
        para.level = '4'
      }
      this.datalistshequ = []
      console.log(para, 'nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn')
      getbusinessStatisticsPageList(para).then(res => {
        if (res.data.errcode === 0) {
          this.datalistshequ = res.data.data.results
          this.shequPageInfo.pageNo = res.data.data.pageNo
          this.shequPageInfo.totalRecord = res.data.data.totalRecord
          this.datalistshequ.forEach(function (temp1, index) {
          })
          this.searchInfo.loading1 = false
        } else {
          this.searchInfo.loading1 = true
          this.$Notice.error({ title: '统计失败', desc: res.data.errmsg })
        }
      })
    },
    forwardRate () {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getForwardRateList(data).then(res => {
        this.forwardList = res.data.data.results
        this.totalRecord = res.data.data.totalRecord
        this.searchInfo.forw = false
      })
    },
    // 时间条件筛选
    findtime (flag) {
      let datatime = {
        create_time_start: date2str(this.apptime[0]),
        create_time_end: date2str(this.apptime[1])
      }
      if (flag) {
        this.rowlist1(datatime)
      } else {
        this.allcommunity(datatime)
      }
    },
    change3 (pageNo) {
      this.currentpageNo = pageNo
      this.qlnameList(this.getparam)
    },
    change1 (pageNo) {
      this.currentpageNo = pageNo
      this.communityInfo(this.getparam)
    },
    communityInfo (param) {
      this.getparam = param
      let create_by = param.row.create_by
      let obj4 = { 'create_by': create_by,
        'pageNo': this.currentpageNo,
        'pageSize': this.currentpageSize,
        create_time_start: date2str(this.apptime[0]),
        create_time_end: date2str(this.apptime[1]) }
      byCreatebyInfoList(obj4).then(res => {
        if (res.data.errcode === 0) {
          this.listdetailss = true
          this.listdetailsdataaa = res.data.data.results
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '获取社区咨询量详情失败' })
        }
      })
      this.currentpageNo = 1
    },
    // 查看所有社区咨询量
    allcommunity (param) {
      findStreetNum(param).then(res => {
        if (res.data.errcode === 0) {
          this.rowlist2 = res.data.data
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '获取各社区咨询量失败' })
        }
      })
    },
    // 查看所有社区咨询量
    searchRichang (timearray) {
      console.log(timearray)
      let orderstate = ''
      this.searchInfo.orderstateList.forEach(function (temp1, index) {
        if (orderstate === '') {
          orderstate = temp1
        } else {
          orderstate += ',' + temp1
        }
      })
      let param = {
        start_time: date2str(timearray[0]),
        end_time: date2str(timearray[1]),
        state: orderstate
      }
      getSomeNum(param).then(res => {
        if (res.data.errcode === 0) {
          this.rc = res.data.data
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '' })
        }
      })
      dycgetSomeNum(param).then(res => {
        if (res.data.errcode === 0) {
          this.num6 = res.data.data.num6
          console.log(this.num6)
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '' })
        }
      })
    },
    // 查看事项问题办结量
    rowlist1 (param) {
      byRowidList(param).then(res => {
        if (res.data.errcode === 0) {
          this.rowlist = res.data.data
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询事项咨询量失败' })
        }
      })
    },
    // 社区统计下拉搜索框的级联查询
    getMailList (id, index, company_code) {
      console.log(company_code, 'company_code')
      if (id === 0) {
        this.mailList[index] = this.mailList[index + 'all']
        this.searchInfo['level' + (index + 1)] = 0
        return
      }
      this.searchInfo['level' + (index + 1)] = 0
      getMailLevelList({ id: id, company_code: company_code }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    // 社区统计下拉搜索框的级联查询
    getMailAllList (index) {
      getMailLevelList({ level: index + 2 }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[(index) + 'all'] = res.data.data
          this.mailList[(index) + 'all'].unshift({ id: 0, title: '全部' })
          this.mailList[index] = this.mailList[index + 'all']
          this.searchInfo['level' + (index + 1)] = 0
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    },
    changeshequPageNo (pageNo) {
      this.shequPageInfo.pageNo = pageNo
      // this.shequPageInfo.pageNo = parseInt(pageNo)
      this.searchDatashequ(pageNo)
    },
    changeshequsize (pageNo) {
      this.shequPageInfo.pageSize = pageNo
      this.changeshequPageNo()
    },
    itemDetailsize (pageNo) {
      this.itemModalInfo.pageSize = pageNo
      this.changeItemDetailPageNo()
    },
    changeItemDetailPageNo (pageNo) {
      this.itemModalInfo.pageNo = pageNo
      this.getHandleList(pageNo)
    }
  },
  mounted () {
    console.log(this.searchInfo.ishavezzz)
    this.allcommunity()
    this.rowlist1()
    console.log(this.companyGrade)
    if (this.companyGrade === 2) {
      this.getMailList(null, 1, this.companyCode)
    } else if (this.companyGrade === 3) {
      this.getMailList(null, 2, this.companyCode)
    } else {
      this.getMailList(null, 0, null)
    }
    this.getMailAllList(1)
    this.getMailAllList(2)
    // this.getMailList(null, 0, null)
    this.forwardRate()
    this.searchDatashequ()
    if (this.companyGrade === 4) {
      this.getPopulationNum()
    }
  }
}
</script>
